<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汉语单词卡片</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="app-container">
        <!-- 头部导航 -->
        <header class="header">
            <div class="header-top">
                <h1 class="app-title">
                    <i class="fas fa-language"></i>
                    汉语单词卡片
                </h1>
                <button class="settings-btn" id="settingsBtn">
                    <i class="fas fa-cog"></i>
                    设置
                </button>
            </div>
            <div class="mode-selector">
                <label for="modeSelect" class="mode-label">
                    <i class="fas fa-layer-group"></i>
                    练习模式
                </label>
                <select id="modeSelect" class="mode-select">
                    <option value="sequential" selected>顺序练习</option>
                    <option value="random">随机练习</option>
                    <option value="favorites">收藏练习</option>
                </select>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 单词卡片 -->
            <div class="card-container">
                <div class="word-card" id="wordCard">
                    <div class="card-front">
                        <div class="word-display">
                            <h2 class="chinese-word" id="chineseWord">点击开始</h2>
                            <div class="word-info hidden" id="wordInfo">
                                <p class="pinyin" id="pinyin"></p>
                                <p class="meaning" id="meaning"></p>
                            </div>
                        </div>
                        <button class="audio-btn" id="audioBtn">
                            <i class="fas fa-volume-up"></i>
                        </button>
                        <button class="favorite-btn" id="favoriteBtn">
                            <i class="far fa-heart"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 控制按钮 -->
            <div class="controls nav-controls">
                <button class="control-btn" id="prevBtn">
                    <i class="fas fa-chevron-left"></i>
                    上一个
                </button>
                <div class="progress-info">
                    <span id="currentIndex">1</span> / <span id="totalCount">15</span>
                </div>

                <button class="control-btn" id="nextBtn">
                    下一个
                    <i class="fas fa-chevron-right"></i>
                </button>
                <button class="control-btn" id="jumpBtn">
                    <i class="fas fa-random"></i>
                    跳转
                </button>
            </div>

            <!-- 统计信息 -->
            <div class="stats">
                <div class="stat-item">
                    <i class="fas fa-book"></i>
                    <span>总词汇: <strong id="totalWords">15</strong></span>
                </div>
                <div class="stat-item">
                    <i class="fas fa-heart"></i>
                    <span>已收藏: <strong id="favoriteCount">0</strong></span>
                </div>
                <div class="stat-item">
                    <i class="fas fa-check-circle"></i>
                    <span>已学习: <strong id="studiedCount">0</strong></span>
                </div>
            </div>
        </main>

        <!-- 提示信息 -->
        <div class="toast" id="toast"></div>

        <!-- 跳转面板 -->
        <div class="settings-overlay hidden" id="jumpOverlay">
            <div class="settings-panel jump-panel">
                <div class="settings-header">
                    <h3><i class="fas fa-random"></i> 跳转到卡片</h3>
                    <button class="close-btn" id="closeJumpBtn">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <div class="settings-content">
                    <div class="setting-group">
                        <label class="setting-label">
                            <i class="fas fa-hashtag"></i>
                            输入卡片编号 <small id="jumpMaxHint" style="opacity:.8;margin-left:8px;"></small>
                        </label>
                        <div class="jump-input-group">
                            <input type="number" id="jumpInput" min="1" placeholder="输入数字">
                        </div>
                    </div>
                </div>

                <div class="settings-footer">
                    <button class="save-settings-btn" id="jumpToBtn">
                        <i class="fas fa-paper-plane"></i>
                        跳转
                    </button>
                </div>
            </div>
        </div>

        <!-- 设置面板 -->
        <div class="settings-overlay hidden" id="settingsOverlay">
            <div class="settings-panel">
                <div class="settings-header">
                    <h3><i class="fas fa-cog"></i> 语音设置</h3>
                    <button class="close-btn" id="closeSettingsBtn">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <div class="settings-content">
                    <!-- 语音方案选择 -->
                    <div class="setting-group">
                        <label class="setting-label">
                            <i class="fas fa-microphone"></i>
                            语音方案
                        </label>
                        <div class="voice-options">
                            <label class="radio-option">
                                <input type="radio" name="voiceProvider" value="local">
                                <span class="radio-custom"></span>
                                <div class="option-info">
                                    <strong>本地语音（默认）</strong>
                                    <small>优先播放 voice 文件夹中的音频，离线更稳定</small>
                                </div>
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="voiceProvider" value="auto">
                                <span class="radio-custom"></span>
                                <div class="option-info">
                                    <strong>智能选择</strong>
                                    <small>自动选择最佳语音方案</small>
                                </div>
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="voiceProvider" value="edge">
                                <span class="radio-custom"></span>
                                <div class="option-info">
                                    <strong>Edge高质量语音</strong>
                                    <small>Microsoft Edge浏览器专用，最自然</small>
                                </div>
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="voiceProvider" value="baidu">
                                <span class="radio-custom"></span>
                                <div class="option-info">
                                    <strong>百度在线语音</strong>
                                    <small>真人发音，需要网络连接</small>
                                </div>
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="voiceProvider" value="system">
                                <span class="radio-custom"></span>
                                <div class="option-info">
                                    <strong>系统语音合成</strong>
                                    <small>浏览器内置，兼容性最好</small>
                                </div>
                            </label>
                        </div>
                    </div>

                    <!-- 语音参数设置 -->
                    <div class="setting-group">
                        <label class="setting-label">
                            <i class="fas fa-sliders-h"></i>
                            语音参数
                        </label>
                        
                        <div class="parameter-group">
                            <div class="parameter-item">
                                <label>语速</label>
                                <div class="slider-container">
                                    <input type="range" id="rateSlider" min="0.5" max="2" step="0.1" value="0.8">
                                    <span class="slider-value" id="rateValue">0.8</span>
                                </div>
                            </div>
                            
                            <div class="parameter-item">
                                <label>音调</label>
                                <div class="slider-container">
                                    <input type="range" id="pitchSlider" min="0.5" max="2" step="0.1" value="1.0">
                                    <span class="slider-value" id="pitchValue">1.0</span>
                                </div>
                            </div>
                            
                            <div class="parameter-item">
                                <label>音量</label>
                                <div class="slider-container">
                                    <input type="range" id="volumeSlider" min="0.1" max="1" step="0.1" value="1.0">
                                    <span class="slider-value" id="volumeValue">1.0</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 系统语音选择 -->
                    <div class="setting-group" id="systemVoiceGroup">
                        <label class="setting-label">
                            <i class="fas fa-user"></i>
                            系统语音选择
                        </label>
                        <select id="systemVoiceSelect" class="voice-select">
                            <option value="">自动选择</option>
                        </select>
                    </div>

                    <!-- 百度语音配置 -->
                    <div class="setting-group hidden" id="baiduConfigGroup">
                        <label class="setting-label">
                            <i class="fas fa-cloud"></i>
                            百度语音配置
                        </label>
                        <div class="config-info">
                            <p><i class="fas fa-info-circle"></i> 使用百度翻译的免费语音服务</p>
                            <p><i class="fas fa-wifi"></i> 需要稳定的网络连接</p>
                        </div>
                    </div>

                    <!-- 测试按钮 -->
                    <div class="setting-group">
                        <button class="test-voice-btn" id="testVoiceBtn">
                            <i class="fas fa-play"></i>
                            测试语音
                        </button>
                    </div>
                </div>

                <div class="settings-footer">
                    <button class="save-settings-btn" id="saveSettingsBtn">
                        <i class="fas fa-save"></i>
                        保存设置
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入字典数据和脚本 -->
    <script src="dict.js"></script>
    <script src="script.js"></script>
</body>
</html>